<template>
	<div class="header-bar">
    <h1 class="title">
      <router-link :to="{ name: 'HomeView' }">豆瓣</router-link>
    </h1>
    <ul class="nav">
      <li>
        <router-link style="color: #2384E8" :to="{ name: 'MovieView' }">电影</router-link>
      </li>
      <li>
        <router-link style="color: #9F7860" :to="{ name: 'BookView' }">图书</router-link>
      </li>
      <li>
        <router-link style="color: #E4A813" :to="{ name: 'StatusView' }">广播</router-link>
      </li>
      <li>
        <router-link style="color: #2AB8CC" :to="{ name: 'GroupView' }">小组</router-link>
      </li>
    </ul>
    <span class="talion" @click="showTalion"></span>
	</div>
</template>
<script>
export default{
  name: 'header-bar',
  methods: {
    showTalion: function () {
      this.$emit('showTalion')
    }
  }
}
</script>
<style lang="scss" scoped>
.header-bar{
  .title{
    width:4.6rem;
    height:2.2rem;
    font-size:0;
    margin-right:1.8rem;
    /*background: url() no-repeat;*/
    background: url(../assets/title.png) no-repeat;
    background-size:cover;
  }
  .nav{
    display: flex;
    flex:1;
    justify-content: flex-end;
    li{
      font-size: 1.6rem;
      margin-right: 1.2rem;
    }
  }
  .talion{
    width:2.4rem;
    height:1.8rem;
    margin-top:0.4rem;
    background: url(../assets/talion.png) no-repeat;
    background-size:cover;
  }
}
</style>
